<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  left: 0px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s ;
  animation-fill-mode: both ;
  /* animation-fill-mode: forwards  ; */
  /* animation-fill-mode: backwards   ; */
  animation-iteration-count: 1;
}
/* 
linear - 规定从开始到结束的速度相同的动画
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值 */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 200px;}
  to {left: 500px;}
}
</style>
</head>
<body>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-timing-funtion 属性。</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>
